<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <!-- <div class="flex items-center justify-between">
                <span class="mr-4 block">礼物名称：</span>
                <el-input class="mr-4 input" v-model="listQuery.search" placeholder="请输入礼物名称"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div> -->
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="奖品ID" prop="reward_id" />
            <el-table-column label="奖品价值" prop="price">
              <template slot-scope="{row}">
                  {{ row.price == 0 ? '--' : row.price }}
              </template>
            </el-table-column>
            <el-table-column label="奖品名称" prop="title"/>
            <el-table-column label="奖品图片" prop="icon">
              <template slot-scope="scoped">
                  <el-image v-if="scoped.row.icon" :src="scoped.row.icon" fit="fill" class="imageStyle" :lazy="true"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="奖品类型" prop="reward_type">
              <template slot-scope="scoped">
                <el-tag v-if="scoped.row.reward_type === 'pet-prop'" type="success" size="normal"  effect="dark">
                  洗练石
                </el-tag>
                <el-tag v-if="scoped.row.reward_type === 'gift'" type="success" size="normal"  effect="dark">
                  礼物
                </el-tag>
                <el-tag v-if="scoped.row.reward_type === 'product'" type="success" size="normal"  effect="dark">
                  装扮
                </el-tag>
                <el-tag v-if="scoped.row.reward_type === 'none'" type="success" size="normal"  effect="dark">
                  不送
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog2"
            lock-scroll
            :title="title"
            width="30%"
            @close="closeAddDialog2"
        >
                <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                    <el-form-item label="奖品类型" prop="reward_type">
                        <el-select v-model="form.reward_type" placeholder="请选择" clearable filterable @change="handleChange">
                          <el-option v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item v-if="form.reward_type === 'pet-prop'" label="奖品名称" prop="reward_id">
                        <el-select v-model="form.reward_id" remote clearable filterable :remote-method="remoteMethod" placeholder="请选择" @clear="clear">
                            <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            <el-popover placement="right" trigger="hover">
                                <img :src="item.picture" alt="" style="max-width: 200px;max-height: 200px">
                                <p slot="reference">{{ item.name }}</p>
                            </el-popover>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.reward_type === 'gift'" label="奖品名称" prop="reward_id">
                      <el-select v-model="form.reward_id" remote clearable filterable :remote-method="remoteMethod" placeholder="请选择" @clear="clear">
                            <el-option
                            v-for="item in options3"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            <el-popover placement="right" trigger="hover">
                                <img :src="item.picture" alt="" style="max-width: 200px;max-height: 200px">
                                <p slot="reference">{{ item.name }}</p>
                            </el-popover>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.reward_type === 'product'" label="奖品名称" prop="reward_id">
                      <el-select v-model="form.reward_id" remote clearable filterable :remote-method="remoteMethod" placeholder="请选择" @clear="clear">
                            <el-option
                            v-for="item in options4"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            <el-popover placement="right" trigger="hover">
                                <img :src="item.picture" alt="" style="max-width: 200px;max-height: 200px">
                                <p slot="reference">{{ item.name }}</p>
                            </el-popover>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="奖品价值">
                        <el-input v-model="form.price" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-form>
        
                <section slot="footer">
                    <el-button @click="addDialog2 = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit()">确定</el-button>
                </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    yearMidPrizeList,
    yearMidPrizeSave,
  } from '@/api/feedbackActivity'
  // 礼物下拉数据
  import { getData } from '@/api/roomGift/giftList'
  // 装扮下拉 洗练石下拉
  import { petPropList, productList } from '@/api/petsManagement'
  
  export default {
    data() {
      return {
        title: '新增',
        dialogVisible: true,
        selectData: '',
        options: [
            {
              value: 'pet-prop',
              label: '洗练石'
            },
            {
              value: 'gift',
              label: '礼物'
            },
            {
              value: 'product',
              label: '装扮'
            },
            {
              value: 'none',
              label: '不送'
            },
        ],
        options2: [],
        options3: [],
        options4: [],
        tableList: [],
        listQuery: {
          page: 1,
          perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog: false,
        addDialog2: false,
  
        rejectLoading: false,
        passLoading: false,
        id: '',
        // 拒绝原因
        reject_reason: '',
        form: {
          id: undefined,
          price: undefined,
          reward_type: undefined,
          reward_id: undefined,
        },
        rules: {
          reward_type: [{ required: true, message: '请选择', trigger: 'blur' }],
          reward_id: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
        optionQuery: {
            page: 1,
            page_size: 50,
            cate_id: 0,
            style_id: 0
        },
        query: ''
      }
    },
    created() {
      this.initData()
      this.handleGetGiftData()
      this.getPetPropList()
      this.getProductList()
    },
    methods: {
      handleGetGiftData() {
          getData({
            gift_name: this.query,
            page: 1,
            page_size: 20
          }).then(res => {
              
              if (res.code === 200) {
                  this.options3 = res.data.data
              }
          })
      },
      getPetPropList() {
          petPropList({
              id: this.optionQuery.id,
              page: 1,
              perPage: 200
          }).then(res => {
              if(res.code === 200) {
                  // res.data.data.map(item => {
                  //     item.reward_id = item.id
                  // })
                  this.options2 =  res.data.data
                  
              }
          })
      },
      getProductList() {
          productList({
              name: this.query,
              id: this.optionQuery.id,
              cate_id: 0,
              style_id: 0,
              status: 1,
              page: 1,
              page_size: 20
          }).then(res => {
              res.data.data.map(item => {
                  item.name = item.product_name
                  // item.reward_id = item.id
              })
              this.options4 = res.data.data
          })
      },
      handleAdd() {
        this.title = '新增'
        this.addDialog2 = true
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          page: 1,
          perPage: 10,
        }
        this.initData()
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
          }
          const { data } = await yearMidPrizeList(this.listQuery)
          this.listQuery.page = data.meta.page
          this.total = data.meta.total
          this.tableList = data.list
        } catch (e) {
          console.error(e)
        }
      },
      handleEdit(row) {
        
        this.optionQuery.id = row.reward_id
        if(row.reward_type === 'gift') {
          this.handleGetGiftData()
        }
        if(row.reward_type === 'pet-prop') {
          this.getPetPropList()
        }
        if(row.reward_type === 'product') {
          this.getProductList()
        }
        this.title = '编辑'
        this.form = JSON.parse(JSON.stringify(row))
        this.addDialog2 = true
      },
      
      onSubmit() {
        this.$refs['form'].validate(valid => {
            if (valid) {
              this.form.pool_id = this.$route.query.id
              yearMidPrizeSave(this.form).then(res => {
                if(res.code === 200) {
                  this.initData()
                  this.addDialog2 = false
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                }
              })
                
            } else {
                return false
            }
        })
        
      },
      closeAddDialog2() {
        this.addDialog2 = false
        if (this.$refs['form']) {
            this.$refs['form'].clearValidate() // 清除整个表单的校验
            this.$refs['form'].resetFields() // 清除整个表单的校验
        }
        this.form = {
          id: undefined,
          price: undefined,
          reward_type: undefined,
          reward_id: undefined,
        }
      },
      remoteMethod(query) {
        this.query = query
        if (query !== '') {
            if(this.form.reward_type === 'gift') {
                this.handleGetGiftData()
            }
            if(this.form.reward_type === 'pet-prop') {
                this.getPetPropList()
            }
            if(this.form.reward_type === 'product') {
                this.getProductList()
            }
        }
      },
      clear() {
          this.optionQuery = {
              page: 1,
              page_size: 100,
              cate_id: 0,
              style_id: 0,
              id: undefined
          }
          if(this.form.reward_type === 'gift') {
            this.handleGetGiftData()
          }
          if(this.form.reward_type === 'pet-prop') {
              this.getPetPropList()
          }
          if(this.form.reward_type === 'product') {
              this.getProductList()
          }
      },
      handleChange(query) {
        this.query = undefined
        this.form.reward_id = undefined
        this.optionQuery = {
            page: 1,
            page_size: 100,
            cate_id: 0,
            style_id: 0,
            id: undefined
        }
        if(this.form.reward_type === 'gift') {
            this.handleGetGiftData()
        }
        if(this.form.reward_type === 'pet-prop') {
            this.getPetPropList()
        }
        if(this.form.reward_type === 'product') {
            this.getProductList()
        }
      },
    },
  }
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .input{
    width: 200px;
  }
</style>
  